<template>
  <div>
    <div class="checkBox-header">
          <el-checkbox class="right-all" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
         <el-button type="success" @click.native="save">保存</el-button>
    </div>
    <el-form class="checkBox-box" :model="baseForm" ref="baseForm">
        <el-form-item>
          <el-checkbox-group v-model="baseForm.selectCodeList">
              <span v-for="(item, index) in reaclDataInfoList" :key="item.menuCode">
                 <div :style="item.childrenList && item.childrenList.length>0?'border-top:1px solid #e6e6e6':''">
                  <el-checkbox :key="index" :label="item.menuCode+'_'+item.rootCode" :indeterminate="item.indeterminate" :checked="item.mychecked" @change="onChangeTop(index, $event)">{{item.menuName}}</el-checkbox>
                <div v-if="item.childrenList!=[]">
                 <el-checkbox style="margin-left: 15px;"  v-for="(items, indexs) in item.childrenList" :label="items.menuCode+'_'+items.rootCode" :checked="items.mychecked" :key="indexs" @change="onChangeSon(index, items.menuCode,$event)">{{items.menuName}}</el-checkbox>
                </div>
              </div>
              </span>
          </el-checkbox-group>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'RightCheck',
  props: {
    listInfo: {type: Object,
      default: () => {
        return {
          list: [], // 权限菜单列表
          defaultChecked: []// 默认选中
        }
      }},
    positionInfo: {type: Object,
      default: () => {
        return {}
      }}
  },
  watch: {
    listInfo: {
      handler (val) {
        let {list, defaultChecked} = val
        if (list && list.length > 0) {
          this.dataInfoList = [...list]
          if (defaultChecked && defaultChecked.length > 0) {
            this.defaultCheckedCodes = [...defaultChecked]
          } else {
            this.checkAll = false
            this.isIndeterminate = false
          }
          this.$nextTick(() => {
            this.initDataList(this.dataInfoList)
          })
        }
      },
      deep: true,
      immediate: true
    },
    baseForm: {
      handler (val) {
        const notTopMenuList = this.clearTopMenu(val.selectCodeList)
        let checkCount = notTopMenuList.length
        this.checkAll = checkCount === this.reaclDataCodeList.length
        this.isIndeterminate = checkCount > 0 && checkCount < this.reaclDataCodeList.length
      },
      deep: true
    }
  },
  data () {
    return {
      dataInfoList: [],
      defaultCheckedCodes: [],
      checkAll: false,
      isIndeterminate: false,
      allTopParentCodes: [], // 全部的顶层的菜单编码
      reaclDataCodeList: [], // 实际可选的菜单编码 格式：${menuCode}_${rootCode}
      baseForm: {
        selectCodeList: [] // 保存的的数据
      },
      reaclDataInfoList: []// 实际可选的菜单
    }
  },
  methods: {
    initDataList (list) {
      this.reaclDataInfoList = this.filterRightList(list)
      this.deepInitList(this.reaclDataInfoList, this.reaclDataCodeList, this.defaultCheckedCodes)
    },
    filterRightList (list) {
      let sortList = []
      list.forEach(item => {
        if (item.childrenList && item.childrenList.length > 0) {
          if (!this.allTopParentCodes.includes(item.menuCode)) {
            this.allTopParentCodes.push(item.menuCode)
          }
          // if (defaultCheckedCodes.includes(item.menuCode)) {
          //   this.topParentCodes.push(item.menuCode)
          // }
          sortList = [...sortList, ...item.childrenList]
        }
      })
      return sortList
    },
    deepInitList (reaclDataInfoList, reaclDataCodeList, defaultCheckedCodes) {
      reaclDataInfoList.forEach(v => {
        // 实际可选的菜单编码
        if (!reaclDataCodeList.includes(v.menuCode + '_' + v.rootCode)) {
          reaclDataCodeList.push(v.menuCode + '_' + v.rootCode)
        }
        // 是否选中状态
        v.mychecked = defaultCheckedCodes && defaultCheckedCodes.includes(v.menuCode)
        // 设置默认值
        if (v.mychecked && !this.baseForm.selectCodeList.includes(v.menuCode + '_' + v.rootCode)) {
          this.baseForm.selectCodeList.push(v.menuCode + '_' + v.rootCode)
        }
        if (v.childrenList && v.childrenList.length > 0) {
          v.indeterminate = false
          if (defaultCheckedCodes) {
            var len = 0
            for (let index = 0; index < v.childrenList.length; index++) {
              const element = v.childrenList[index]
              if (defaultCheckedCodes.includes(element.menuCode)) {
                len++
              }
            }
            v.indeterminate = len > 0 && len < v.childrenList.length
          }
          this.deepInitList(v.childrenList, reaclDataCodeList, defaultCheckedCodes)
        }
      })
    },
    clearTopMenu (list) {
      if (list && list.length > 0 && this.allTopParentCodes) {
        return list.filter(v => {
          return !this.allTopParentCodes.includes(v)
        })
      }
      return []
    },
    handleCheckAllChange (val) {
      if (val) {
        // 选择的菜单+顶层的菜单
        this.baseForm.selectCodeList = [...this.allTopParentCodes, ...this.reaclDataCodeList]
        this.reaclDataInfoList.forEach(item => {
          item.indeterminate = false
          item.mychecked = true
        })
      } else {
        this.baseForm.selectCodeList = []
        this.deepSetCheckBox(this.reaclDataInfoList, false, false)
      }
      this.isIndeterminate = false
    },
    deepSetCheckBox (list, indeterminate, mychecked) {
      if (list && list.length > 0) {
        list.forEach(item => {
          item.isIndeterminate = this.isIndeterminate
          item.mychecked = this.mychecked
          if (item.childrenList && item.childrenList.length > 0) {
            this.deepSetCheckBox(item.childrenList, indeterminate, mychecked)
          }
        })
      }
    },
    // 父级checbox点击事件
    onChangeTop (index, e) {
      if (e) {
        this.reaclDataInfoList[index].mychecked = true
        this.reaclDataInfoList[index].indeterminate = false
        const childrenList = this.reaclDataInfoList[index].childrenList
        if (childrenList && childrenList.length > 0) {
          childrenList.forEach(item => {
            let i = this.baseForm.selectCodeList.indexOf(item.menuCode + '_' + item.rootCode)
            if (i === -1) {
              this.baseForm.selectCodeList.push(item.menuCode + '_' + item.rootCode)
            }
          })
        }
      } else {
        this.reaclDataInfoList[index].mychecked = false
        this.reaclDataInfoList[index].indeterminate = false
        const childrenList = this.reaclDataInfoList[index].childrenList
        if (childrenList && childrenList.length > 0) {
          this.reaclDataInfoList[index].childrenList.forEach(item => {
            let i = this.baseForm.selectCodeList.indexOf(item.menuCode + '_' + item.rootCode)
            if (i > -1) {
              this.baseForm.selectCodeList.splice(i, 1)
            }
          })
        }
      }
    },
    // 子级checbox点击事件
    onChangeSon (index, sonId, e) {
      var childrenArray = this.reaclDataInfoList[index].childrenList
      var tickCount = 0, len = childrenArray.length
      childrenArray.forEach(item => {
        if (this.baseForm.selectCodeList.indexOf(item.menuCode + '_' + item.rootCode) > -1) {
          item.mychecked = true
        }
      })
      for (let i = 0; i < len; i++) {
        if (sonId === childrenArray[i].menuCode) {
          childrenArray[i].mychecked = e
        }
        if (childrenArray[i].mychecked === true) {
          tickCount++
        }
      }
      this.reaclDataInfoList[index].indeterminate = !!(((tickCount !== len) && (tickCount !== 0)))
      this.reaclDataInfoList[index].mychecked = tickCount === len // 全不选的时候为false
      let vv = this.reaclDataInfoList[index]
      if (tickCount === 0) {
        let i = this.baseForm.selectCodeList.indexOf(vv.menuCode + '_' + vv.rootCode)
        if (i > -1) {
          this.baseForm.selectCodeList.splice(i, 1)
        }
      } else {
        if (this.baseForm.selectCodeList.indexOf(vv.menuCode + '_' + vv.rootCode) === -1) {
          this.baseForm.selectCodeList.push(vv.menuCode + '_' + vv.rootCode)
        }
      }
    },
    save () {
      let selectInfo = this.baseForm.selectCodeList
      const positionInfo = this.positionInfo
      if (!positionInfo || !positionInfo.positionCode) {
        this.$msgBox.error('职位信息不存在')
        return
      }
      let menuList
      if (selectInfo && selectInfo.length > 0) {
        menuList = []
        let rootList = []
        selectInfo.forEach(item => {
          if (item.indexOf('_') > -1) {
            const codes = item.split('_')
            if (!rootList.includes(codes[1])) {
              rootList.push(codes[1])
              menuList.push({menuCode: codes[1], rootCode: codes[1], status: 1})
            }
            menuList.push({menuCode: codes[0], rootCode: codes[1], status: 1})
          } else {
            menuList.push({menuCode: item, rootCode: null, status: 1})
          }
        })
      }
      this.$emit('save', {positionCode: positionInfo.positionCode, menuCodeList: menuList || []})
    }
  }


}
</script>

<style lang="scss" scoped>
.checkBox-header{
    text-align: right;
    padding-right: 15px;
}
>>>.el-checkbox{
    padding: 0;
}

</style>
